Skip to content

Pass through menu events as makeup-menu-button-select and makeup-menu-button-change#231

Draft
Copilot wants to merge 5 commits intomasterfrom
copilot/fix-menu-button-custom-events
Draft

Pass through menu events as makeup-menu-button-select and makeup-menu-button-change#231
Copilot wants to merge 5 commits intomasterfrom
copilot/fix-menu-button-custom-events

Conversation

Copy link

Copilot AI commented Feb 8, 2026 •
edited
Loading

Documentation advertises makeup-menu-button-select and makeup-menu-button-change events, but the code never dispatched them. Users had to workaround by listening directly to the underlying menu: widget.menu.el.addEventListener("makeup-menu-select", ...).

Changes

  • src/index.js: Re-dispatch makeup-menu-select and makeup-menu-change as makeup-menu-button-select and makeup-menu-button-change with bubbles: true
  • docs/.../index.js: Update demo to listen on menu-button element instead of internal menu element

Implementation

Event passthrough uses object mapping in _onMenuItemSelect:

const eventTypeMap = {
  "makeup-menu-select": "makeup-menu-button-select",
  "makeup-menu-change": "makeup-menu-button-change",
};
const eventName = eventTypeMap[e.type];

if (eventName) {
  this.el.dispatchEvent(
    new CustomEvent(eventName, {
      detail: e.detail,
      bubbles: true,
    }),
  );
}

API now works as documented:

const widget = new MenuButton(el);
el.addEventListener("makeup-menu-button-select", (e) => console.log(e.detail));
el.addEventListener("makeup-menu-button-change", (e) => console.log(e.detail));

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • artifactory.corp.ebay.com
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/_temp/ghcca-node/node/bin/npm install (dns block)
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/_temp/ghcca-node/node/bin/npm install --registry=REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>makeup-menu-button: Docs mention non-existent custom events</issue_title>
<issue_description>The component docs mention a makeup-menu-button-select and a makeup-menu-button-change custom event: https://github.com/makeup/makeup-js/tree/master/packages/ui/makeup-menu-button

However, the code is not dispatching any of these: https://github.com/makeup/makeup-js/blob/master/packages/ui/makeup-menu-button/src/index.js

We are currently using instance.menu.el.addEventListener("makeup-menu-select") instead.</issue_description>

<agent_instructions>makeup-menu-button should simply pass through the underlying menu events. The menu button documentation page is currently listening directly to the menu events as a workaround. Alternativelty we could keep the API as is and update the documentation.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 4 commits February 8, 2026 01:50
@ianmcburnie
Add event passthrough for makeup-menu-button-select and makeup-menu-b…
dcf2c48 
…utton-change

Co-authored-by: ianmcburnie <38065+ianmcburnie@users.noreply.github.com>
@ianmcburnie
Add guard for unexpected event types in event passthrough
972b39a 
Co-authored-by: ianmcburnie <38065+ianmcburnie@users.noreply.github.com>
@ianmcburnie
Improve event type mapping with cleaner object-based approach
cd012e0 
Co-authored-by: ianmcburnie <38065+ianmcburnie@users.noreply.github.com>
@ianmcburnie
Add bubbles property to custom events for proper event propagation
28eafd1 
Co-authored-by: ianmcburnie <38065+ianmcburnie@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix custom events in makeup-menu-button documentation Pass through menu events as makeup-menu-button-select and makeup-menu-button-change Feb 8, 2026
Copilot AI requested a review from ianmcburnie February 8, 2026 01:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ianmcburnie ianmcburnie Awaiting requested review from ianmcburnie

Assignees

@ianmcburnie ianmcburnie

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

makeup-menu-button: Docs mention non-existent custom events

2 participants

@ianmcburnie